* {
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(2, 71, 99);
}

h3,
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

input {
    outline: none;
}

.maincontainer {
    width: 80vw;
    min-height: 80vh;
    margin: 0 auto;
    overflow: hidden;
    background-color: rgb(178, 201, 195);
}

/* 头部输入区域 */
.maincontainer header {
    padding: 0 12px;
}

.maincontainer header h1 {
    margin: 8px 0;
}

.maincontainer .input-module {
    display: grid;
    grid-template-columns: 7fr 3fr;
    padding: 8px 12px;
    width: 100%;
    height: 56px;
}

.input-module .input-content {
    display: grid;
    grid-template-columns: 8fr 1fr 1fr;
}

.input-module .input-content button {
    margin: 0 8px;
}

.input-module .input-content>input {
    padding: 4px 8px;
    margin-right: 24px;
}

.input-module .time-now {
    font-size: 16px;
    background-color: bisque;
    display: grid;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
}

/* 主体内容区域 */
.maincontainer .content {
    padding: 8px 12px;
    width: 100%;
}

.content ul li {

    height: 24px;
    margin-bottom: 4px;
    background-color: deepskyblue;
}

.content ul li>input {
    vertical-align: middle;
}

.content ul li>.modif {
    display: none;
}

.content h3 {
    font-size: 20px;
    margin: 16px 0;
}

.content .todo {
    width: 100%;
    margin-bottom: 20px;
    padding: 4px 8px;
    border: 12px solid rgba(255, 166, 0, 0.8);
    border-radius: 4px;
}

.content .done {
    width: 100%;
    padding: 4px 8px;
    border: 12px solid rgba(19, 241, 12, 0.8);
    border-radius: 8px;
}